import avatar from '@/assets/avatar.png';
import { login } from '@/services/login/LoginController';
import type { UserLoginParams } from '@/services/login/typings';
import { setToken } from '@/utils/operateToken';
import { history } from '@@/exports';
import { LockOutlined, MailOutlined, UserOutlined } from '@ant-design/icons';
import {
  LoginFormPage,
  ProConfigProvider,
  ProFormCheckbox,
  ProFormText,
} from '@ant-design/pro-components';
import { message, theme } from 'antd';
import { useState } from 'react';
import styles from './index.module.less';

const Page = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const { token } = theme.useToken();
  const [captchaSrc, setCaptchaSrc] = useState('/common/captcha');
  const onFinish = async (form: UserLoginParams) => {
    try {
      const res = await login(form);
      setToken(res.data.access_token);
      messageApi.open({
        type: 'success',
        content: res.msg,
      });
      history.replace('/');
    } catch (error: any) {}
  };
  return (
    <div className={styles.fullscreen}>
      {contextHolder}
      <LoginFormPage
        logo={avatar}
        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
        title="REINDEER の ADMIN"
        containerStyle={{
          backgroundColor: 'rgba(0, 0, 0,0.65)',
          backdropFilter: 'blur(4px)',
        }}
        subTitle="Built on Umi Max"
        onFinish={onFinish}
      >
        <ProFormText
          name="username"
          fieldProps={{
            size: 'large',
            prefix: (
              <UserOutlined
                style={{
                  color: token.colorText,
                }}
                className={'prefixIcon'}
              />
            ),
          }}
          placeholder={'Username or email address'}
          rules={[
            {
              required: true,
              message: 'Please input a username or email!',
            },
          ]}
        />
        <ProFormText.Password
          name="pw"
          fieldProps={{
            size: 'large',
            prefix: (
              <LockOutlined
                style={{
                  color: token.colorText,
                }}
                className={'prefixIcon'}
              />
            ),
          }}
          placeholder={'password'}
          rules={[
            {
              required: true,
              message: 'Please input a password!',
            },
          ]}
        />

        <div className={styles.captcha}>
          <ProFormText
            name="captcha"
            fieldProps={{
              size: 'large',
              prefix: (
                <MailOutlined
                  style={{
                    color: token.colorText,
                  }}
                  className={'prefixIcon'}
                />
              ),
            }}
            placeholder="captcha"
            rules={[
              {
                required: true,
                message: 'Please input captcha!',
              },
              {
                type: 'string',
                min: 4,
                max: 4,
                message: 'Length of captcha is incorrect!',
              },
            ]}
            width="sm"
          />
          <div
            onClick={() => setCaptchaSrc('/common/captcha?' + Math.random())}
          >
            <img src={captchaSrc} alt="" />
          </div>
        </div>

        <div className={styles.auto_btn}>
          <ProFormCheckbox noStyle name="autoLogin">
            Automatic sign in
          </ProFormCheckbox>
        </div>
      </LoginFormPage>
    </div>
  );
};

export default () => {
  return (
    <ProConfigProvider dark>
      <Page />
    </ProConfigProvider>
  );
};
